<template>
  <!-- 这是导航栏组件 -->
  <div class="mynav">
    <router-link tag="label"
                 to="/"
                 class="back"
                 v-if="leftBtn=='back'">&lt;back</router-link>
    <div class="back"
         v-else></div>
    <label class="title">{{titletext}}</label>
    <label class="show"
           v-if="rightBtn=='home'"
           @click="showList()">☰list</label>
    <div class="show"
         v-else
         @click="handlesave()">完成</div>
  </div>
</template>
<script>
export default {
  // 标题内容，左按钮内容，右按钮内容
  props: ["titletext", "leftBtn", "rightBtn"],
  data () {
    return {
      // title:'navbar'
    }
  },
  methods: {
    /* 当点击保存时 */
    handlesave () {
      this.$store.commit("saveNode") // 保存数据
      this.$store.commit("msgShow", true) // 提示成功
      // 关闭提示信息，跳转到首页
      setTimeout(() => { this.$store.commit("msgShow", false); this.$router.push("/") }, 1000);
    },
    /* 展示右上角的列表 */
    showList () {
      if (this.$store.state.showList.list) {
        this.$store.commit("showList", false) // 如果列表显示则隐藏
      } else {
        this.$store.commit("showList", true) // 如果列表隐藏则显示
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mynav {
  height: 60px;
  background: #ee6;
  text-align: center;
  align-content: center;
  display: flex;
}
.back,
.show {
  flex: 1;
  font-size: 20px;
  line-height: 60px;
  color: #567;
  font-family: "微软雅黑";
  cursor: pointer;
}
.title {
  flex: 3;
  font-size: 20px;
  line-height: 60px;
  color: #567;
  font-family: "微软雅黑";
}
</style>